import { useState, useRef } from 'react'
import { Button, Form, Input, Select, message } from 'antd';
import { addAccountApi } from '../../../apis/users';
export default function AddAccount() {
  const [loading, setLoading] = useState(false)
  const refObj = useRef()
  const onFinish = (values) => {
    setLoading(true)
    addAccountApi(values).then(res=>{
      message.success('添加成功')
      setLoading(false)
      refObj.current.resetFields();
    }).catch(error=>{
      console.log(error);
      setLoading(false)
      if (refObj.current) {
         refObj.current.resetFields();
      }
      
     
    })




    // fetch('http://jacklv.cn/users/addOrEditAccount', {
    //   method: 'post',
    //   body: JSON.stringify(values),
    //   headers: {
    //     'Content-Type': 'application/json',
    //     token: localStorage.token
    //   }
    // }).then(response => response.json()).then(res => {
    //   if (res.code == 1) {
    //     message.success('添加成功')
    //     setLoading(false)
    //     refObj.current.resetFields();

    //   } else {
    //     message.error(res.msg)
    //     setLoading(false)
    //     refObj.current.resetFields();
    //   }

    // }).catch(err => {
    //   setLoading(false)
    // })
  };
  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };
  return (
    <div style={{display:'flex',alignItems:'center',justifyContent:'center',height:'100%'}}>
      <Form
        name="basic"
        labelCol={{
          span: 8,
        }}
        wrapperCol={{
          span: 16,
        }}
        style={{
          width: 600,
        }}
        initialValues={{
          userGroup: '超级管理员',
        }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
        ref={refObj}
      >
        <Form.Item
          label="Username"
          name="account"
          rules={[
            {
              required: true,
              message: 'Please input your username!',
            },
          ]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="Password"
          name="password"
          rules={[
            {
              required: true,
              message: 'Please input your password!',
            },
          ]}
        >
          <Input.Password />
        </Form.Item>
        <Form.Item label="Select" name='userGroup' rules={[
          {
            required: true,

          },
        ]}>
          <Select>
            <Select.Option value="超级管理员">超级管理员</Select.Option>
            <Select.Option value="普通管理员">普通管理员</Select.Option>
          </Select>
        </Form.Item>
        <Form.Item
          wrapperCol={{
            offset: 8,
            span: 16,
          }}
        >
          <Button type="primary" htmlType="submit" loading={loading}>
            Submit
          </Button>
        </Form.Item>
      </Form>
    </div>
  )
}
